<template>
  <view class="returnDetails">
    <view class="returnDetails-state">
      <view class="log">
        <image
          class="log-icon"
          :src="`${STATIC_URL2}return.png`"
          mode="aspectFit"
        ></image>
        <view class="log-info">
          <view class="desc"> {{ statusText }}</view>
          <!-- <view class="time"> 2020-12-13 19：09：28 </view> -->
        </view>
      </view>
      <view class="user">
        <image
          class="user-icon"
          mode="aspectFit"
          :src="`${STATIC_URL2}address.png`"
        ></image>
        <view class="user-info">
          <view class="top">
            <view class="info-name"> {{ details.name }} </view>
            <view class="info-tel">{{ details.phone }}</view>
          </view>
          <view class="address">
            {{ details.address }}
          </view>
        </view>
      </view>
    </view>
    <view class="returnDetails-order">
      <view class="title">
        <image class="icon" mode="aspectFit" :src="`${STATIC_URL2}bag.png`" />
        <view class="text">订单信息</view>
      </view>
      <view class="bd">
        <template v-for="item in details.order_goods">
          <order-item :key="item.id" :item="item"> </order-item>
        </template>
        <view class="pay"> 实付：¥ {{ money }} </view>
        <view class="oper">
          <!-- <view class="btn" v-if="details.status == 0" @click="payState = true"
            >立即支付</view
          > -->
          <!-- <view class="btn"> 申请退款 </view> -->
        </view>
      </view>
    </view>
    <view class="returnDetails-details">
      <view class="row">换货编号：{{ details.service_num }}</view>
      <view> 退货说明：{{ details.explain }} </view>
      <view class="imgs" >
        <template v-for="(item, index) in details.images">
          <image
            :src="item"
            :key="index"
            mode="aspectFill"
            class="imgs-item"
          ></image>
        </template>
      </view>
    </view>
    <view class="returnDetails-info">
      <view class="row">物流公司：{{ details.shipping_name }}</view>
      <view class="row"
        >快递单号：{{ details.shipping_number
        }}<view class="copy" @click="copy" v-if="details.shipping_number"
          >复制</view
        ></view
      >
      <!-- <view class="row">
        下单时间：{{ timeFormat(details.createtime, "Y/M/D h:m") }}
      </view>
      <view class="row">
        发货时间：{{ timeFormat(details.shipping_time, "Y/M/D h:m") || "" }}
      </view> -->
    </view>

    <view class="returnDetails-oper">
      <view class="btn check" v-if="details.status == 1" @click="deliver"
        >立即发货</view
      >
      <template v-if="details.status == 3">
        <!-- <view class="btn check" @click.stop="logisticsNavigate">
          查看物流 -->
        <!-- </view> -->
        <view class="btn confirm" @click.stop="confirm"> 确认收货 </view>
      </template>
      <template> </template>
    </view>
    <u-action-sheet
      :list="payList"
      v-model="payState"
      @click="payClick"
    ></u-action-sheet>
    <u-modal
      v-model="showDeliver"
      @confirm="deliverConfirm"
      @cancel="deliverCancel"
    >
      <view class="slot-content">
        <!-- <rich-text :nodes="content"></rich-text> -->
        <u-form :model="form" ref="uForm" label-width="150">
          <u-form-item label="快递公司" prop="shipping_name">
            <u-input v-model="form.shipping_name"></u-input>
          </u-form-item>
          <u-form-item label="快递单号" prop="shipping_number">
            <u-input v-model="form.shipping_number"></u-input>
          </u-form-item>
        </u-form>
      </view>
    </u-modal>
  </view>
</template>

<script>
import {
  orderDetails,
  shoppingCarDel,
  stateUpdate,
  statePay,
  returnDetails,
  deliverReturn,
} from "@/utils/api";
import OrderItem from "@/components/order/order";
import { mapGetters } from "vuex";
import { formatTime } from "@/utils/time";
export default {
  components: {
    OrderItem,
  },
  computed: {
    ...mapGetters(["bagsRecord"]),
    statusText() {
      let arr = [
        "换货申请审核中，请耐心等待...",
        "换货申请已通过，请尽快发货...",
        "等待商家收货...",
      ];
      let obj = {
        0: "换货申请审核中，请耐心等待...",
        1: "换货申请已通过，请尽快发货...",
        2: "等待商家操作...",
        3: "商家已发货，请耐心等待...",
        4: "换货售后已完成",
        5: "换货申请已被拒绝",
      };
      // return arr[Number(this.details.status) - 5];
      return obj[Number(this.details.status)];
    },
    money() {
      let total = 0;
      if (this.details.order_goods) {
        this.details.order_goods.map((item) => {
          total += Number(item.num) * Number(item.price);
        });
      }

      return total;
    },
    // imgs() {
    //   if (this.details.images) {
    //     return this.details.images.split(",");
    //   }
    // },
  },

  data() {
    return {
      id: "", // 订单id
      type: "", // 订单类型
      details: {}, // 订单信息
      payList: [
        {
          text: "余额支付",
          value: 0,
        },
        {
          text: "微信支付",
          value: 1,
        },
      ],
      payState: false,
      showDeliver: false,
      form: {
        shipping_name: "",
        shipping_number: "",
      },
      rules: {
        shipping_name: [
          {
            required: true,
            message: "请输入快递公司",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
        shipping_name: [
          {
            required: true,
            message: "请输入快递单号",
            trigger: "change",
          },
        ],
      },
    };
  },
  onLoad({ id }) {
    this.id = id;
    this.initInfo();

    // 删除购物车下单成功订单
    let pages = getCurrentPages();
    console.log(pages);
    let pre = pages[pages.length - 2]; // 上一页为orderConfirm
    // orderConfirm 下单成功使用redirectTo 会从页面栈中移除
    if (pre.route == "pages/tabs/bag/bag") {
      console.log("bags=======", pre);
      // pre.$vm.dropBag(); //
      shoppingCarDel({
        id: this.bagsRecord,
      }).then((resp) => {
        console.log("删除购物车", resp);
      });
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    // 立即发货
    deliver() {
      this.showDeliver = true;
    },
    deliverConfirm() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          // console.log('验证通过');
          const { shipping_name, shipping_number } = this.form;
          deliverReturn({
            id: this.details.id,
            shipping_name,
            shipping_number,
          }).then((resp) => {
            console.log("用户发货", resp);
            if (resp.code == 200) {
              uni.showToast({
                icon: "none",
                title: resp.msg,
                success: () => {
                  this.initInfo();
                },
              });
            }
          });
        } else {
          console.log("验证失败");
        }
      });
    },
    deliverCancel() {},
    // 复制
    copy() {
      uni.setClipboardData({
        data: this.details.shipping_number,
        success: () => {
          uni.showToast({
            icon: "none",
            title: "已复制到剪贴板",
          });
        },
      });
    },
    timeFormat(time, str) {
      return formatTime(time, str);
    },
    initInfo() {
      returnDetails({
        id: this.id,
      }).then((resp) => {
        console.log("订单详情", resp);
        if (resp.code == 200) {
          this.details = resp.data;
        }
      });
    },
    // 立即支付
    payNow() {},
    // 取消订单
    orderCancel() {
      uni.showModal({
        title: "确认取消吗？",
        success: ({ confirm }) => {
          stateUpdate({
            id: this.details.id,
            status: this.details.status,
          }).then((resp) => {
            console.log("取消订单", resp);
            if (resp.code == 200) {
              this.initInfo();
            }
          });
        },
      });
    },
    payClick(index) {
      statePay({
        id: this.details.id,
        pay: this.payList[index].value,
      }).then((resp) => {
        console.log("订单支付", resp);
        if (resp.code == 200) {
          if (resp.data.payRes) {
            const { timeStamp, nonceStr, signType, paySign } = resp.data.payRes;
            uni.requestPayment({
              timeStamp,
              nonceStr,
              package: resp.data.payRes.package,
              signType,
              paySign,
              success: (resp) => {
                uni.showToast({
                  icon: "none",
                  title: "支付成功",
                });
                this.initInfo();
              },
              fail: (error) => {
                console.log("payment失败", error);
                // uni.showToast({
                //   icon: "none",
                //   title: "支付失败",
                // });
              },
            });
          } else {
            uni.showToast({
              icon: "none",
              title: resp.msg,
            });
          }
        } else {
          uni.showToast({
            icon: "none",
            title: resp.msg,
          });
        }
      });
    },
    // 查看物流
    logisticsNavigate() {
      uni.navigateTo({
        url: "/pages/common/logistics/logistics?id=" + this.details.id,
      });
    },
    // 确认收货
    confirm() {
      uni.showModal({
        title: "确认收货吗？",
        success: ({ confirm }) => {
          if (confirm) {
            deliverReturn({
              id: this.details.id,
            }).then((resp) => {
              console.log("用户收货", resp);
              if (resp.code == 200) {
                uni.showToast({
                  icon: "none",
                  title: resp.msg,
                  success: () => {
                    this.initInfo();
                  },
                });
              }
            });
            // stateUpdate({
            //   id: this.details.id,
            //   status: this.details.status,
            // }).then((resp) => {
            //   console.log("取消订单", resp);
            //   if (resp.code == 200) {
            //     this.initInfo();
            //   }
            // });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}
.returnDetails {
  background-color: #ffffff;
  &-state {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx;
    .log {
      padding: 20rpx 0;
      @include border;
      display: flex;
      align-items: center;
      &-icon {
        width: 40rpx;
        height: 35rpx;
        margin-right: 25rpx;
      }
      &-info {
        .desc {
          font-size: 26rpx;
          color: #cd8544;
          line-height: 50rpx;
        }
        .time {
          font-size: 20rpx;
          color: #aaaaaa;
        }
      }
    }
    .user {
      display: flex;
      align-items: center;
      padding: 10rpx 0;
      &-icon {
        width: 36rpx;
        height: 43rpx;
        margin-right: 25rpx;
      }
      &-info {
        font-size: 24rpx;
        .top {
          display: flex;
          align-items: center;
          line-height: 40rpx;
          &-name {
            margin-right: 35rpx;
          }
        }
      }
    }
  }
  &-order {
    border-top: 6rpx solid #f7f7f7;
    border-bottom: 6rpx solid #f7f7f7;

    width: 100%;
    box-sizing: border-box;
    padding: 30rpx 30rpx 0 30rpx;
    .title {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      font-weight: bold;
      .icon {
        width: 25rpx;
        height: 29rpx;
        margin-right: 18rpx;
      }
    }
    .bd {
      width: 100%;
      box-sizing: border-box;
      padding: 0 15rpx;

      .pay {
        line-height: 50rpx;
        text-align: right;
        font-size: 26rpx;
        @include border;
      }
      .oper {
        text-align: right;
        .btn {
          display: inline-block;
          margin: 22rpx 0;
          padding: 10rpx 15rpx;
          font-size: 26rpx;
          color: #e44444;

          border: 1rpx solid #e44444;
          border-radius: 8rpx;
        }
      }
    }
  }
  &-details {
    background-color: #ffffff;
    color: #aaaaaa;
    font-size: 24rpx;
    line-height: 45rpx;
    box-sizing: border-box;
    padding: 15rpx 30rpx;
    // margin-bottom: 200rpx;
    letter-spacing: 1rpx;
    .imgs {
      display: flex;
      flex-wrap: wrap;
      &-item {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
      }
    }
  }
  &-info {
    background-color: #ffffff;
    color: #aaaaaa;
    font-size: 24rpx;
    line-height: 45rpx;
    box-sizing: border-box;
    padding: 15rpx 30rpx;
    margin-bottom: 200rpx;
    letter-spacing: 1rpx;
    .row {
      .copy {
        width: 70rpx;
        display: inline-block;
        font-size: 22rpx;
        text-align: center;
        line-height: 40rpx;
        border: 1rpx solid #181616;
        border-radius: 4rpx;
        margin-left: 30rpx;
      }
    }
  }
  &-oper {
    height: 100rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #ffffff;
    justify-content: flex-end;
    .btn {
      padding: 13rpx 18rpx;
      font-size: 30rpx;
      border-radius: 8rpx;
    }
    .check {
      color: #1e1b1b;
      margin-right: 18rpx;

      border: 1rpx solid #cccccc;
    }
    .confirm {
      color: #ffffff;
      background-color: #cd8544;
    }
  }
}
</style>
